<template>
    <div>
        <el-page-header content="关卡新增" title="返回" @click="goback"></el-page-header>
    </div>
    <div style="margin-top: 20px;">
        <el-descriptions title="新增关卡安排" :column="2" direction="vertical" border>
            <el-descriptions-item label="关卡名称">
                <el-input v-model="names"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="起止时间">
                <div class="block">
                    <el-date-picker v-model="time" type="datetimerange" range-separator="到" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="完成积分">
                <el-input v-model="points" :min="0" :step="10" size="large" />
            </el-descriptions-item>
            <el-descriptions-item label="首次完成额外奖励积分">
                <el-input v-model="extraPoints" :min="0" :step="10" size="large" />
            </el-descriptions-item>
            <el-descriptions-item label="选择关卡">
                <div style="width: 300px;">
                    <el-row>
                        <el-col :span="12" style="display: flex;float: left;">
                            <el-tag v-if="guanq != ''">{{ guanq }}</el-tag>
                            <el-tag v-else>
                                暂无任务
                            </el-tag>
                        </el-col>
                        <el-col :span="12" style="display: flex;float: right;">
                            <el-button style="margin-left: 89px;" plain type="warning" @click="xzrguanq">去选择</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="选择组织">
                <div style="width: 350px;">
                    <el-row>
                        <el-col :span="12" style="display: flex;float: left;">
                            <template v-if="orgids.length != 0 && dialogzuzhiVisible == false">
                                <el-tag :key="obj.id" v-for="obj in orgids">{{ obj.name }}</el-tag>
                            </template>
                            <el-tag v-else>
                                暂无组织
                            </el-tag>
                        </el-col>
                        <el-col :span="12" style="display: flex;float: right;">
                            <el-button style="margin-left: 172px;" plain type="warning" @click="xzzuzhi">去选择</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="操作">
                <el-button @click="add" type="primary">新增</el-button>
            </el-descriptions-item>
        </el-descriptions>
    </div>
    <el-dialog v-model="dialogzuzhiVisible" title="组织列表" :datas="orgids">
        <Dialogzuzhi @Dialogzuzhi="zuzhidata">

        </Dialogzuzhi>
    </el-dialog>
    <el-dialog v-model="dialogguanqVisible" title="任务列表" :datas="lid">
        <DialogLevel @DialogLevel="guanqdata">

        </DialogLevel>
    </el-dialog>
</template>
<script lang="ts">
import router from '@/router'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import Dialogzuzhi from '../../../components/organization/Dialogzuzhi.vue'
import DialogLevel from '../../../components/level/DialogLevel.vue'
import {AddLevelArrange} from '../../../api/practice/arrange/index'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
    components:{
        Dialogzuzhi,
        DialogLevel
    },
    setup() {
        const data=reactive({
            ids: [],
            dialogzuzhiVisible: false,//组织对话框
            dialogguanqVisible: false,//任务对话框
            orgids: [] as any[],//组织id
            lid: [] as any,//任务id
            points: 0,//奖励积分
            extraPoints: '',//额外奖励积分
            names: '',//任务名称
            time: [],//时间
            guanq: '',
            guanqid: '',
        })

        const events={
            goback(){
                router.go(-1)
            },
            //新增
            add() {
                var ids: any[] = []
                data.orgids.forEach((item: any) => {
                    ids.push(item.id)
                })

                //当前时间
                var ymd = parseInt(events.getCurrentTime().split(' ')[0].split('/').join(""))  //年月日
                var hms = events.getCurrent().split(':').join("") //时分秒
                console.log("今日时分秒", hms)
                //开始时间
                var Kymd = parseInt(events.dateFormat(data.time[0]).split(' ')[0].split('/').join(""))  //年月日
                var Khms = events.dateFormat(data.time[0]).split(' ')[1].split(':').join("")  //时分秒
                console.log("开始时分秒", Khms)
                //结束时间
                var Jymd = parseInt(events.dateFormat(data.time[1]).split(' ')[0].split('/').join(""))  //年月日
                if (Kymd < ymd) {
                    ElMessage({
                        message: '开始时间不能小于今日时间',
                        type: 'error',
                    })
                    return
                }
                if (Kymd == ymd) {
                    if (Khms < hms) {
                        ElMessage({
                            message: '开始时间不允许小于当前时间',
                            type: 'error',
                        })
                        return
                    }
                }
                if (Jymd - Kymd > 7) {
                    ElMessage({
                        message: '最大时间范围7天',
                        type: 'error',
                    })
                    return
                }
                ElMessageBox.confirm(
                    '你确定要新增吗?',
                    '新增任务安排',
                    {
                        confirmButtonText: '是',
                        cancelButtonText: '否',
                        type: 'warning',
                    }
                ).then(() => {
                    AddLevelArrange({
                        name: data.names,
                        begin: data.time[0],
                        end: data.time[1],
                        lid: data.guanqid,
                        orgids:ids,
                        point: data.points,
                        extraPoint: data.extraPoints
                    }).then((res: any) => {
                        if (res.result == 0) {
                            ElMessage({
                                type: 'success',
                                message: '添加成功',
                            })
                            router.push('/practice/arrange/')
                        } else {
                            ElMessage({
                                type: 'error',
                                message: '添加失败',
                            })
                        }
                    })
                }).catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '操作取消',
                        })
                    })
            },
            //选择关卡
            xzrguanq(){
                data.dialogguanqVisible=true
            },
            //选择职务
            xzzuzhi(){
                data.dialogzuzhiVisible=true
            },
            //组织选择
            zuzhidata(obj: any) {
                if (data.orgids.find((d: any) => d.id == obj.id) == undefined) {
                    data.orgids = obj;
                } else {
                    data.orgids = [];
                    data.orgids = obj;
                }
                data.dialogzuzhiVisible = false
            },
            //关卡选择
            guanqdata(datass:any){
                data.lid.push(datass);
                for (let i = 0; i < data.lid.length; i++) {
                    data.guanqid = data.lid[i].id;
                    data.guanq = data.lid[i].name;
                }
                console.log("拿到tpids", data.lid);
                data.dialogguanqVisible = false;
            },
            //时间转换，时间转换 Wed Sep 16 2020 00:00:00 GMT+0800 (中国标准时间)
            dateFormat(dateData: any) {
                var date = new Date(dateData)
                var y = date.getFullYear()
                var m: any = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                var d: any = date.getDate()
                d = d < 10 ? ('0' + d) : d
                //时分秒
                var h: any = date.getHours();
                h = h < 10 ? ('0' + h) : h
                var mm: any = date.getMinutes();
                mm = mm < 10 ? ('0' + mm) : mm
                var s: any = date.getSeconds();
                s = s < 10 ? ('0' + s) : s
                const time = y + '/' + m + '/' + d + ' ' + h + ":" + mm + ':' + s
                return time
            },
            //当前年月日
            getCurrentTime() {
                //获取当前时间并打印
                var date = "";
                let yy = new Date().getFullYear();
                let mm: any = new Date().getMonth() + 1;
                mm = mm < 10 ? ('0' + mm) : mm
                let dd: any = new Date().getDate();
                dd = dd < 10 ? ('0' + dd) : dd
                date = yy + '/' + mm + '/' + dd
                return date
            },
            //当前时分秒
            getCurrent() {
                //获取当前时间并打印
                var date = "";
                let hh = new Date().getHours();
                let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
                date = hh + ':' + mf + ':' + ss;
                return date
            }
            }
        

        onMounted(()=>{

        })

        return{
            ...toRefs(data),
            ...events
        }
    },
})
</script>